<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pedra, Papel, Tesoura, Lagarto ou Spock !!!</title>
<script type="text/javascript" src='json2.js'></script>
<script type="text/javascript">
	if (!window.WebSocket && window.MozWebSocket)
		window.WebSocket = window.MozWebSocket;
	if (!window.WebSocket)
		alert("WebSocket not supported by this browser");

	var ws;

	function init() {
		ws = new WebSocket(
				"ws://localhost:12345/PedraPapelTesouraLagartoSpock/JogoServlet");
		ws.onopen = function() {
			document.querySelector("#log").innerHTML = 'conectou no servidor';
		};
		ws.onmessage = function(m) {
			document.querySelector("#log").innerHTML = document
					.querySelector("#log").innerHTML
					+ "<br/>" + m.data;
		}

	}

	function JoinCmd(name) {
		this.command = 'join';
		this.name = name;
	}

	function SendCmd(message) {

		this.command = 'send';
		this.message = message;
	}

	function Join() {
		var name = document.querySelector('#nome').value;
		var joincmd = new JoinCmd(name);
		ws.send(JSON.stringify(joincmd));
	}

	function Send(value) {
		var msg = value;
		var sendcmd = new SendCmd(msg);
		ws.send(JSON.stringify(sendcmd));
	}
</script>
</HEAD>
<BODY onload="init()">

	<h3>Pedra, Papel, Tesoura, Lagarto ou Spock</h3>
	<a href="regras.html" target="_blank">Regras do Jogo</a>


	<br />
	<br />
	<form>
		<table>
			<tr>
				<td>Nome:</td>
				<td><input type="text" id="nome" maxlength="100"
					style="width: 200px"></td>
				<td><input type="button" value="Entrar no Jogo"
					onclick="Join()" /></td>
			</tr>
		</table>


		<table>
			<tr>
				<td><IMG SRC="./imgs/RockPaperScissorLizardSpock.jpg"
					USEMAP="#RockPaperScissorLizardSpock" WIDTH=600 HEIGHT=600
					BORDER="0"></td>

				<td><div id="log"></div></td>

			</tr>

		</table>
	</form>

	<MAP NAME="RockPaperScissorLizardSpock">
		<AREA ID="PEDRA" SHAPE="CIRCLE" HREF="javascript:Send('Pedra')"
			ALT="PEDRA" TITLE="PEDRA" COORDS="420,477,85">
		<AREA ID="LAGARTO" SHAPE="CIRCLE" HREF="javascript:Send('Lagarto')"
			ALT="LAGARTO" TITLE="LAGARTO" COORDS="185,483,86">
		<AREA ID="SPOCK" SHAPE="CIRCLE" HREF="javascript:Send('Spock')"
			ALT="SPOCK" TITLE="SPOCK" COORDS="112,254,85">
		<AREA ID="TESOURA" SHAPE="CIRCLE" HREF="javascript:Send('Tesoura')"
			ALT="TESOURA" TITLE="TESOURA" COORDS="295,115,87">
		<AREA ID="PAPEL" SHAPE="CIRCLE" HREF="javascript:Send('Papel')"
			ALT="PAPEL" TITLE="PAPEL" COORDS="489,250,87">
	</MAP>
</BODY>
</HTML>
